<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单个dom节点</title>
    <style>
        .active{
            background-color: greenyellow;
        }

    </style>
</head>
<body>
<div id="message" >box1</div>
<div>box2</div>
<a href="#">主页</a>
</body>
<script src="../../lib/jquery.js"></script>
<script>
    /***
     * 1. 普通属性
     * 2. 样式
     * 3. 事件
     * */

    /**1. 普通属性 */
    // $('#message').attr('id','box1');
     $('a').attr('href','index.html');
    // alert( $('a').attr('href'));

     /**2.样式*/

    /* $('#message').attr('style','background-color: #FF0000');
     $('#message').attr('style','display:none')*/

    $('#message').addClass('box');
    $('#message').addClass('active');

    $('#message').removeClass('active');

   /**
    * 3.事件
    *     事件名称 --- click mouseover
    *     处理函数 ---- function
    *     事件绑定 ---- 关联 事件名称 和 处理函数
    * */

    $('div').bind('click',function () {
        $('.active').removeClass('active');
        $(this).addClass('active');
    })



</script>
</html>